<template>
    <div>
      <el-row>
        <!--offset左移4个-->
        <!--Col Attributes-->
        <!--https://element.eleme.cn/#/zh-CN/component/layout-->
        <el-col :span="12" :offset="4">
          <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" placeholder="请输入活动名称" label-position="left"
                   label-width="100px"  class="demo-ruleForm">

            <el-form-item label="活动名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域" value="" style="float: left">
                <!--<el-option label="上海" value="shanghai"></el-option>-->
                <!--<el-option label="北京" value="beijing"></el-option>-->

                <el-option v-for ="(item,index) in ruleForm.options" :key="index"
                           :label="item.label" :value="item.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="活动时间" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="即时配送" prop="delivery">
              <el-switch v-model="ruleForm.delivery" style="float: left;margin-top: 10px"></el-switch>
            </el-form-item>

            <el-form-item label="活动性质" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="特殊资源" prop="resource">
              <el-radio-group v-model="ruleForm.resource" style="float: left;margin-top: 10px">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="活动形式" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"
                        :autosize="{minRows: 2, maxRows: 4}" placeholder="文本域"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')" >重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

    </div>
</template>

<script>
    export default {
        name: 'FormTest',
        props: {},
        components: {},
        data() {
            return {

              ruleForm:{
                name:'',
                region:'',
                options:  [
                  {id:0,label:"上海",value:"上海"},
                  {id:1,label:"北京",value:"北京"},
                  {id:2,label:"大连",value:"大连"},
                  {id:3,label:"天津",value:"天津"},
                ],
                date1: '2019-7-1',
                data2:'',
                delivery:false,//开关开始状态为关闭
                type: ["美食/餐厅线上活动","","",""],
                resource: '线上品牌商赞助',
                desc:'',
              },
              rules:{
                name:[
                  {required:true,message:'请输入活动名称', trigger: 'blur'},
                  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                  { required: true, message: '请选择活动区域', trigger: 'change',type:'integer' }
                ],
                data1:[
                  {type:'date',required:true,message:'请选择日期',trigger: 'change'}
                ],
                date2: [
                  { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                  { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                  { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                  { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
              }
            }
        },
        computed: {

        },
        watch: {
            data(newValue, oldValue) {

            }
        },
      methods: {
        // submitForm(formName) {// ref="ruleForm" form表单设置这个属性是父元素注册
        //   this.$refs[formName].validate((valid) => {//箭头函数
        //     if (valid) {
        //       console.log(formName);//ruleForm
        //       console.log(valid);//true
        //       alert('submit!');
        //
        //     } else {
        //       console.log('error submit!!');
        //       return false;
        //     }
        //   });
          submitForm:function(formName) {// ref="ruleForm" form表单设置这个属性是父元素注册
            var vm= this;
            this.$refs[formName].validate(function (valid) {//箭头函数
              if (valid) {
                console.log(formName);//ruleForm
                // 注意：this如果直接写就是在这个function里的不是全局vue的this所以要在function执行之前声明this是全局的
                console.log(vm.ruleForm);
                console.log(vm.ruleForm.name);//获得数据
                console.log(valid);//true
                alert('submit提交!');

              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        // resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
        // https://element.eleme.cn/#/zh-CN/component/form
        resetForm:function(formName) {
          this.$refs[formName].resetFields();
        }
      },
    }
</script>

<style scoped>

</style>
